<template>
  <div id="homePage" class="home-page">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="container">
        <div class="content-layout">
          <!-- 左侧图书列表 -->
          <div class="book-list-section">
            <div class="section-header">
              <h2 class="section-title">
                <BookOutlined />
                图书列表
              </h2>
              <div class="total-count">共 {{ total }} 本图书</div>
            </div>

            <div class="card-book-list">
              <a-list
                :grid="{ gutter: 24, xs: 1, sm: 2, md: 2, lg: 3, xl: 4, xxl: 4 }"
                :data-source="dataList"
                :pagination="pagination"
                :loading="loading"
              >
                <template #renderItem="{ item: book }">
                  <a-list-item style="padding: 0">
                    <a-card hoverable @click="doClcikPicture(book)" class="book-card">
                      <template #cover>
                        <div class="book-cover">
                          <img
                            :src="book.book_url || '/placeholder-book.jpg'"
                            :alt="book.book_name"
                            class="cover-image"
                          />
                          <div class="book-overlay">
                            <div class="overlay-content">
                              <a-button type="primary" shape="round" class="view-detail-btn">
                                <EyeOutlined />
                                查看详情
                              </a-button>
                            </div>
                          </div>
                        </div>
                      </template>
                      <div class="book-info">
                        <h3 class="book-title">{{ book.book_name }}</h3>
                        <p class="book-author">{{ book.book_author || '未知作者' }}</p>
                        <div class="book-meta">
                          <a-tag color="blue" class="category-tag">{{
                            book.book_category ?? '默认'
                          }}</a-tag>
                          <div class="book-price">￥{{ book.book_price || '未知' }}</div>
                        </div>
                      </div>
                    </a-card>
                  </a-list-item>
                </template>
              </a-list>
            </div>
          </div>

          <!-- 右侧排行榜 -->
          <div class="sidebar-section">
            <!-- 热门书籍排行榜 -->
            <a-card class="ranking-card hot-ranking" :bordered="false">
              <template #title>
                <div class="ranking-header">
                  <FireOutlined class="ranking-icon hot" />
                  <span class="ranking-title">热门借阅榜</span>
                </div>
              </template>
              <div class="ranking-list">
                <div
                  v-for="(book, index) in hotBooks"
                  :key="book.book_id"
                  class="ranking-item"
                  @click="doClcikPicture(book)"
                >
                  <div class="rank-badge" :class="getRankClass(index)">
                    {{ index + 1 }}
                  </div>
                  <div class="book-cover-small">
                    <img :src="book.book_url || '/placeholder-book.jpg'" :alt="book.book_name" />
                  </div>
                  <div class="book-info-small">
                    <div class="book-title-small">{{ book.book_name }}</div>
                    <div class="book-author-small">{{ book.book_author }}</div>
                    <div class="borrow-count">
                      <UserOutlined />
                      {{ book.record_count || 0 }} 人借阅
                    </div>
                  </div>
                </div>
              </div>
            </a-card>
          </div>
        </div>
      </div>
    </div>

    <a-back-top type="primary" />
  </div>
</template>

<script lang="ts" setup>
import { getHotBookListUsingGet, listBookVoByPageUsingPost } from '@/api/bookController'
import { BookOutlined, EyeOutlined, FireOutlined, UserOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { computed, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const dataList = ref([])
const total = ref(0)
const loading = ref(true)
const categoryList = ref<string[]>([])
const selectCategory = ref<string>('all')

// 模拟热门书籍数据
const hotBooks = ref([])

const getHotBookList = async () => {
  const res = await getHotBookListUsingGet()
  console.log('获取热门书籍列表', res)
  if (res.data.code === 0) {
    hotBooks.value = res.data.data?.splice(0, 10) || []
  }
}

//搜索条件
const searchParams = reactive<API.BookQueryRequest>({
  current: 1,
  pageSize: 12,
  sortField: 'book_uploadtime',
  sortOrder: 'descend',
})

//分页参数
const pagination = computed(() => {
  return {
    current: searchParams.current,
    pageSize: searchParams.pageSize,
    total: total.value,
    showSizeChanger: true,
    showQuickJumper: true,
    showTotal: (total: number) => `共 ${total} 本图书`,
    pageSizeOptions: ['12', '24', '48'],
    onChange: (page: number, pageSize: number) => {
      searchParams.current = page
      searchParams.pageSize = pageSize
      getPictureList()
    },
  }
})

//获取图片列表
const getPictureList = async () => {
  loading.value = true
  const params = {
    ...searchParams,
  }
  if (selectCategory.value !== 'all') {
    params.category = selectCategory.value
  }
  const res = await listBookVoByPageUsingPost(searchParams)
  console.log('获取图片列表', res)
  if (res.data.code === 0) {
    dataList.value = res.data.data.records
    total.value = res.data.data.total
  } else {
    message.error(res.data.message)
  }
  loading.value = false
}

//跳转至图片详情
const doClcikPicture = (book: API.BookVO) => {
  router.push({
    path: `/book/${book.book_id}`,
  })
}

const doSearch = () => {
  searchParams.current = 1
  getPictureList()
}

// 获取排名样式
const getRankClass = (index: number) => {
  if (index === 0) return 'rank-gold'
  if (index === 1) return 'rank-silver'
  if (index === 2) return 'rank-bronze'
  return ''
}

onMounted(() => {
  getPictureList()
  getHotBookList()
})
</script>

<style lang="scss" scoped>
.home-page {
  background: #f8fafc;
  min-height: 100vh;
}

// 内容布局
.content-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: start;
}

// 图书列表区域
.book-list-section {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .section-title {
      font-size: 24px;
      font-weight: 600;
      color: #1f2937;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
    }

    .total-count {
      color: #6b7280;
      font-size: 14px;
    }
  }
}

// 图书卡片样式
.book-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: none;

  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  }

  .book-cover {
    position: relative;
    overflow: hidden;

    .cover-image {
      width: 100%;
      height: 280px;
      object-fit: cover;
      transition: all 0.3s ease;
    }

    .book-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.3s ease;

      .overlay-content {
        .view-detail-btn {
          padding: 8px 20px;
          height: auto;
          font-weight: 500;
        }
      }
    }

    &:hover {
      .cover-image {
        transform: scale(1.05);
      }

      .book-overlay {
        opacity: 1;
      }
    }
  }

  .book-info {
    padding: 16px;

    .book-title {
      font-size: 16px;
      font-weight: 600;
      color: #1f2937;
      margin: 0 0 8px 0;
      line-height: 1.4;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .book-author {
      color: #6b7280;
      font-size: 14px;
      margin: 0 0 12px 0;
    }

    .book-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .category-tag {
        border: none;
        border-radius: 6px;
        font-size: 12px;
        padding: 4px 8px;
      }

      .book-price {
        font-weight: 600;
        color: #ef4444;
        font-size: 16px;
      }
    }
  }
}

// 侧边栏区域
.sidebar-section {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

// 排行榜卡片
.ranking-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;

  :deep(.ant-card-head) {
    border-bottom: 1px solid #f0f0f0;
    padding: 16px 20px;
    min-height: auto;

    .ant-card-head-title {
      padding: 0;
      font-size: 18px;
      font-weight: 600;
    }
  }

  :deep(.ant-card-body) {
    padding: 0;
  }

  .ranking-header {
    display: flex;
    align-items: center;
    gap: 8px;

    .ranking-icon {
      font-size: 20px;

      &.hot {
        color: #ff4d4f;
      }

      &.recommend {
        color: #faad14;
      }
    }

    .ranking-title {
      font-size: 18px;
      font-weight: 600;
    }
  }

  .ranking-list {
    .ranking-item {
      display: flex;
      align-items: center;
      padding: 16px 20px;
      border-bottom: 1px solid #f5f5f5;
      cursor: pointer;
      transition: all 0.3s;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background: #f8fafc;
      }

      .rank-badge {
        width: 24px;
        height: 24px;
        border-radius: 6px;
        background: #e5e7eb;
        color: #6b7280;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 600;
        margin-right: 12px;
        flex-shrink: 0;

        &.rank-gold {
          background: linear-gradient(135deg, #fbbf24, #f59e0b);
          color: white;
        }

        &.rank-silver {
          background: linear-gradient(135deg, #e5e7eb, #9ca3af);
          color: white;
        }

        &.rank-bronze {
          background: linear-gradient(135deg, #f97316, #ea580c);
          color: white;
        }
      }

      .book-cover-small {
        width: 40px;
        height: 50px;
        border-radius: 4px;
        overflow: hidden;
        margin-right: 12px;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .book-info-small {
        flex: 1;
        min-width: 0;

        .book-title-small {
          font-size: 14px;
          font-weight: 500;
          color: #1f2937;
          margin-bottom: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .book-author-small {
          font-size: 12px;
          color: #6b7280;
          margin-bottom: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .borrow-count,
        .recommend-reason {
          font-size: 11px;
          color: #9ca3af;
          display: flex;
          align-items: center;
          gap: 4px;
        }

        .recommend-reason {
          background: #f0f9ff;
          padding: 2px 6px;
          border-radius: 4px;
          display: inline-block;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .content-layout {
    grid-template-columns: 1fr;
  }

  .sidebar-section {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 60px 0 40px;

    .hero-content {
      .hero-title {
        font-size: 36px;
      }

      .hero-subtitle {
        font-size: 18px;
      }
    }
  }

  .sidebar-section {
    grid-template-columns: 1fr;
  }

  .category-tabs {
    :deep(.ant-tabs-nav) {
      .ant-tabs-tab {
        padding: 8px 16px;
        font-size: 14px;
      }
    }
  }

  .book-card {
    .book-cover {
      .cover-image {
        height: 200px;
      }
    }
  }
}

@media (max-width: 480px) {
  .main-content .container {
    padding: 0 16px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>
